html{
    height:100%;
}

body{
    height:100%;
}

#app{
    width:100%;
    height:100%;

    min-width: 900px;
    min-height:500px;

    overflow: auto;/*超出范围自动产生滚动条*/

    display: flex;/* 定义本元素（#app）是一个flex（柔性布局/灵活布局）盒子  */
    flex-direction: row;/*内部元素按行排列*/

}

.nav {
    height: 100%;

    overflow: hidden; /*超出范围隐藏*/
    transition: width 0.5s;

    box-shadow: rgba(0, 0, 0, 0.1) 1px 0px 1px;

    display: flex;
    flex-direction: column;
}

.main{
    height:100%;
    flex:auto;/*本元素做为flex容器中的元素，以自动扩展占位*/

    display: flex;
    flex-direction: column;

}

.title{
    width:100%;
    height:50px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;

    position: relative;/*这样设置，将做为子元素的定位基准*/
}

.main-menu:hover{/*鼠标悬浮时的样式*/
    color:white;
    background-color: slateblue;
}
